﻿@using GlobalResources
@using Microsoft.Azure.IoTSuite.Connectedfactory.WebApp.Contoso
@using Microsoft.Azure.IoTSuite.Connectedfactory.WebApp.Models

@model DashboardModel


<div class="dashboard_children_container_header row">
    <div id="backIcon" class="dashboard_children_back_icon col-xs-1 col-md-1 col-lg-1 " hidden>
        <a aria-label="back" id="backIconLink" class="dashboard_children_container_header_icon" align="left" href="#" onclick="gotoParentNode();">
            <img aria-label="back" class="dashboard-chevron-left" src="/Content/img/chevron_left.svg">
        </a>
    </div>
    <p id="headerText" class="dashboard_children_container_header_text col-xs-8 col-md-8 col-lg-8 overflow">@Model.ChildrenContainerHeader</p>
    <a id="allIcon" class="dashboard_children_container_header_text_glyph" href="#" onclick="openFilterContextPanel();" role="button">
        <img aria-label="filter" class="dashboard_children_container_header_filter" src="/Content/img/filter.svg">
        @Strings.NoFilterApplied 
    </a>
    <p id="filterIcon" class="dashboard_children_container_header_text_glyph" hidden>
        <a id="openFromFiltered" href="javascript:openFilterContextPanel();"><img class="dashboard_children_container_header_filter" src="/Content/img/filter.svg"></a>
    </p>
</div>
<table>
    <div class="dashboard_children_list_header row" aria-label="tableHeader">
        <div class="dashboard_children_list_header_status col-xs-3 col-lg-3 overflow">@Model.ChildrenListHeaderStatus</div>
        <div class="dashboard_children_list_header_location col-xs-4 col-lg-4 overflow">@Model.ChildrenListHeaderLocation</div>
        <div class="dashboard_children_list_header_details col-xs-5 col-lg-5 overflow">@Model.ChildrenListHeaderDetails</div>
    </div>
    <div id="childrenListContainer" class="dashboard_children_list_container scrollbar-inner scroll_only_y row" role="grid" aria-rowcount="@Model.Children.Count">
        <div id="dashboardChildrenList" class="col-xs-12">

            @for (int i = 0; i < Model.Children.Count; i++)
            {
                var child = Model.Children[i];
                var statusMessage = Strings.Normal;
                var dashboardStatusClass = "dashboard_status_good";
                if (child.Status == ContosoPerformanceStatus.Poor.ToString())
                {
                    statusMessage = Strings.Error;
                    dashboardStatusClass = "dashboard_status_poor";
                }
                RouteValueDictionary valueDictionary = new RouteValueDictionary { { "topNode", child.Key } };
                var dashboardUrl = @Url.Action("Index", "Dashboard", valueDictionary);
                <div role="row">
                    @if (Model.ChildrenType == typeof(ContosoOpcUaNode))
                    {
                        if (child.Visible == true)
                        {
                            <div id="dashboard_children_listitem@(i)" class="dashboard_children_listitem_container @dashboardStatusClass row" role="gridcell" aria-rowindex="@i"
                                 onclick="javascript:openContextPanelFromNode('@child.Name', '@child.SubKey');" onkeydown="if (event.keyCode == 13)openContextPanelFromNode('@child.Name', '@child.SubKey');" tabindex="0">
                                <div id="childrenListListItemStatusText@(i)" class="dashboard_children_listitem_status_text col-xs-3 col-lg-3 overflow">@statusMessage</div>
                                <div class="dashboard_children_listitem_location col-xs-4 col-lg-4 overflow">@child.Name</div>
                                <div class="dashboard_children_listitem_details col-xs-4 col-lg-4 overflow">@child.Last @child.Unit</div>
                            </div>
                        }
                    }
                    else
                    {
                        <div id="dashboard_children_listitem@(i)" class="dashboard_children_listitem_container @dashboardStatusClass row" role="gridcell" aria-rowindex="@i"
                             onclick="javascript:gotoChildrenNode('@dashboardUrl');" onkeydown="if (event.keyCode == 13)gotoChildrenNode('@dashboardUrl');" tabindex="0">
                            <div id="childrenListListItemStatusText@(i)" class="dashboard_children_listitem_status_text col-xs-3 col-lg-3 overflow">@statusMessage</div>
                            <div class="dashboard_children_listitem_location col-xs-4 col-lg-4 overflow">@child.Name</div>
                            <div class="dashboard_children_listitem_details col-xs-4 col-lg-4 overflow">@child.Description</div>
                            <img aria-label="next" class="dashboard-chevron-right" align="right" src="/Content/img/chevron_right.svg">
                        </div>
                    }
                </div>
            }
        </div>
    </div>
</table>

<script>
    $(document).ready(function () {
        jQuery('.scrollbar-inner').scrollbar();
        @if (Model.TopNode.Key != "TopologyRoot")
        {
             @: $("#backIcon").show();
             @: $("#headerText").addClass("dashboard_children_container_header_text_left_margin");
        }
        else
        {
             @: $("#headerText").removeClass("dashboard_children_container_header_text_left_margin");
        }
    })

    function gotoChildrenNode(dashboardUrl) {
        window.location.href = dashboardUrl;
    }

    function gotoParentNode() {
        var parentUrl = '@Url.Action("Index", "Dashboard", new { topNode = Model.TopNode.Parent})';
        window.location.href = parentUrl;
    }
</script>